<template>
  <div
    v-if="opened"
    v-dragMove="{
      DragButton: '.QueryFormTitle',
      DragWindow: '.form-query',
    }"
  >
    <div
      class="window form-query"
      @click="
        () => {
          beforeDelete = false;
          focusedIndex = -1;
        }
      "
    >
      <div
        :class="[
          'title-bar',
          'QueryFormTitle',
          titleBarInactive ? 'inactive' : '',
        ]"
      >
        <img
          class="title-bar-img"
          src="@/assets/win98icons/directory_explorer-5.png"
        />
        <div class="title-bar-text">Query Results</div>
        <div class="title-bar-controls">
          <button aria-label="Close" @click="close()"></button>
        </div>
      </div>
      <div class="window-body">
        <div class="content-container" style="height: 50vh">
          <table style="width: 1320px">
            <thead>
              <tr>
                <th style="width: 50px">#</th>
                <th style="width: 150px">时间</th>
                <th style="width: 80px">设备</th>
                <th style="width: 80px">提交人</th>
                <th style="width: 300px">问题描述</th>
                <th style="width: 300px">改进需求与建议</th>
                <th style="width: 60px">已上报</th>
                <th style="width: 60px">已回复</th>
                <th style="width: 300px">回复内容</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in queryOutput"
                @click.stop="handleClickCell(item.number)"
                :class="[focusedIndex == item.number ? 'focused' : '']"
              >
                <td style="width: 50px">
                  <input
                    @click.prevent="null"
                    type="checkbox"
                    :id="`checkbox_${item.number}`"
                    :value="item.number"
                    v-model="selectedIndex"
                  />
                  <label
                    :for="`checkbox_${item.number}`"
                    @click.prevent="null"
                    >{{ item.number }}</label
                  >
                </td>
                <td style="width: 150px">{{ item.eventTime }}</td>
                <td style="width: 80px">{{ item.equipment }}</td>
                <td style="width: 80px">{{ item.name }}</td>
                <td style="width: 300px">
                  {{ item.description }}
                </td>
                <td style="width: 300px">
                  {{ item.requirement }}
                </td>
                <td style="width: 60px">{{ item.reported ? "是" : "否" }}</td>
                <td style="width: 60px">{{ item.replied ? "是" : "否" }}</td>
                <td style="width: 300px">{{ item.reply }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="inline-container"
          style="margin-top: 12px; justify-content: center"
        >
          <button
            @click="handleClickSelectAll()"
            :disabled="selectedIndex.length == queryOutput.length"
          >
            全选
          </button>
          <button
            @click.stop="handleClickSelectNone()"
            :disabled="selectedIndex.length == 0"
          >
            全不选
          </button>
          <button
            @click.stop="handleClickDelete()"
            :disabled="selectedIndex.length == 0"
          >
            删除所选
          </button>
          <button
            @click.stop="handleClickExport()"
            :disabled="selectedIndex.length == 0"
          >
            导出所选
          </button>
          <button
            @click.stop="handleClickReply()"
            :disabled="focusedIndex == -1"
          >
            添加回复
          </button>
        </div>
        <div
          class="blinking"
          style="
            display: flex;
            justify-content: center;
            color: red;
            font-weight: bolder;
          "
          v-show="beforeDelete"
        >
          <img
            style="margin-right: 3px; width: 12px; height: 12px"
            src="@/assets/win98icons/msg_warning-0.png"
          />
          <span>如确认删除，请再次点击“删除所选”</span>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-cover" v-if="opened" @click="handleModalClick()"></div>
  <ReplyForm ref="replyForm" @update="reload()" @close="handleSubFromClose()" />
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted, h } from "vue";
import handleQuery from "./handleQuery.js";
import handleDelete from "./handleDelete.js";
import handleExport from "./handleExport.js";
import ReplyForm from "./ReplyForm.vue";
const opened = ref(false);
const queryInput = ref(null);
const queryOutput = ref([]);
const replyForm = ref();

const reload = async () => {
  await handleQuery(queryInput.value).then((result) => {
    queryOutput.value = result;
  });
};

const open = (queryInputValue) => {
  console.log("open", queryInputValue);
  // createInput.value = createInputValue;
  queryInput.value = JSON.parse(JSON.stringify(queryInputValue));
  reload();
  focusedIndex.value = -1;
  selectedIndex.value = [];
  queryOutput.value = [];
  opened.value = true;
};
const close = () => {
  emit("close");
  opened.value = false;
};

defineExpose({ open, close });
const emit = defineEmits(["close"]);

const focusedIndex = ref(-1);
const selectedIndex = ref([]);

const handleClickCell = (number) => {
  focusedIndex.value = number;
  if (selectedIndex.value.indexOf(number) === -1) {
    selectedIndex.value.push(number);
  } else {
    selectedIndex.value.splice(selectedIndex.value.indexOf(number), 1);
  }
  selectedIndex.value.sort();
};
const handleClickSelectAll = () => {
  for (let i = 0; i < queryOutput.value.length; i++) {
    if (selectedIndex.value.indexOf(queryOutput.value[i].number) === -1) {
      selectedIndex.value.push(queryOutput.value[i].number);
    }
  }
  selectedIndex.value.sort();
};
const handleClickSelectNone = () => {
  selectedIndex.value = [];
  focusedIndex.value = -1;
};
const beforeDelete = ref(false);
const handleClickDelete = () => {
  if (!beforeDelete.value) {
    beforeDelete.value = true;
  } else {
    beforeDelete.value = false;
    handleDelete(selectedIndex.value).then(() => reload());
  }
};
const handleClickExport = () => {
  let input = new Array();
  selectedIndex.value.sort();
  for (let i = 0; i < queryOutput.value.length; i++) {
    if (selectedIndex.value.indexOf(queryOutput.value[i].number) > -1) {
      input.push(queryOutput.value[i]);
    }
  }
  handleExport(input);
};
const handleClickReply = () => {
  titleBarInactive.value = true;
  queryOutput.value.forEach((item) => {
    if (item.number == focusedIndex.value) {
      replyForm.value.open(item);
    }
  });
};

const titleBarInactive = ref(false);

const handleSubFromClose = () => {
  titleBarInactive.value = false;
};

let modalClickTimer = null;
let modalClickCounter = 0;
const handleModalClick = () => {
  modalClickCounter = 0;
  modalClickTimer = setInterval(() => {
    titleBarInactive.value = !titleBarInactive.value;
    modalClickCounter++;
    if (modalClickCounter >= 10) {
      titleBarInactive.value = false;
      clearInterval(modalClickTimer);
    }
  }, 50);
};
</script>

<style scoped>
@import "@/styles/98.css";
@import "@/styles/98custom.css";

.form-query {
  width: 50vw;
  /* height: 50vh; */
  left: 120px;
  top: 100px;
  z-index: 3;
}

.content-container {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-radius: 0;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
  box-sizing: border-box;
  width: 100%;
  /* padding: 3px 4px; */
  overflow: auto;
  margin: 0;
  padding: 2px;
}

table {
  width: auto;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

thead > tr > th {
  padding: 3px 4px;
  border: 1px solid silver;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

tbody > tr > td {
  margin: 0;
  padding: 3px 4px;
  border: 1px solid silver;
}

.focused {
  background-color: navy;
  color: #fff;
}

.blinking {
  /* transition: all 0.3 ease-in-out; */
  opacity: 1;
  animation-name: blinking;
  animation-duration: 0.35s;
  /* animation-duration: 0.75s; */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blinking {
  0% {
    opacity: 1;
  }
  /* 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } */
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>
